<template>
  <div id="secondList">
    <!--上部搜索条件组件-->
    <topSearch :form-inline="formInline" @toSearch="toSearch"></topSearch>
    <!-- 操作按钮 -->
    <div class="table-conBtn">
      <el-button type="warning" icon="el-icon-plus" @click="editPage('add')">
        新增
      </el-button>
      <el-button type="warning" plain @click="delMul">
        批量删除
      </el-button>
      <el-button type="warning" icon="el-icon-download" @click="exportRoles">
        导出
      </el-button>
      <freshCom @searchList="searchList"></freshCom>
    </div>
    <!--下部table-->
    <el-table
      v-loading="loading"
      :data="tableData"
      stripe
      style="width: 100%"
      @selection-change="handleSelectionChange"
      max-height="490"
      ref="table"
    >
      <el-table-column
        type="selection"
        width="55"
        align="center"
      ></el-table-column>
      <el-table-column
        label="字典编码"
        prop="dictCode"
        show-overflow-tooltip
        min-width="120"
      ></el-table-column>
      <el-table-column
        label="字典标签"
        prop="dictLabel"
        min-width="130"
      ></el-table-column>
      <el-table-column
        label="字典键值"
        prop="dictValue"
        min-width="130"
      ></el-table-column>
      <el-table-column
        label="字典排序"
        prop="dictSort"
        min-width="130"
      ></el-table-column>
      <el-table-column label="状态" prop="platformName" min-width="120">
        <template slot-scope="scope">
          <span
            v-if="scope.row.status"
            class="tag-span"
            :class="scope.row.status | filterClass('sysNormalDisable')"
            >{{ scope.row.status | filterName('sysNormalDisable') }}</span
          >
        </template>
      </el-table-column>
      <el-table-column
        label="备注"
        prop="remark"
        min-width="120"
      ></el-table-column>
      <el-table-column
        label="创建时间"
        show-overflow-tooltip
        prop="createTime"
        width="150"
      >
      </el-table-column>
      <el-table-column fixed="right" label="操作" min-width="100">
        <template slot-scope="scope">
          <el-button type="text" @click="editPage('edit', scope.row.dictCode)">
            编辑
          </el-button>
          <el-button type="text" @click="delSingle(scope.row.dictCode)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页-全局组件-->
    <pageCom
      :searchParams="searchParams"
      :total="total"
      @searchList="searchList"
    ></pageCom>
    <dialogAddEdit
      v-if="dialogData.isShow"
      :dialog-data="dialogData"
      @refresh="refresh"
    ></dialogAddEdit>
  </div>
</template>

<script>
import {
  getDSecondList,
  multipleDelSecond,
  singleDelSecond,
  exportSecondUrl
} from '@/api/system/dictionaries' // 接口
import topSearch from '@component/system/dictionaries/topSearch2' // 上部搜索条件
import dialogAddEdit from '@component/system/dictionaries/dialogAddEdit2' // 新增/编辑弹窗
export default {
  name: 'dSecondList',
  msg: '字典管理-二级列表页',
  components: {
    topSearch,
    dialogAddEdit
  },
  data() {
    return {
      loading: true,
      total: 0,
      tableData: [], // table内容
      dictType: null,
      searchParams: {
        pageNum: 1, // 当前页数
        pageSize: 10, // 页面显示条数
        orderByColumn: 'dictSort', // 排序字段
        isAsc: 'asc' // 正序倒序
      },
      formInline: {
        // 搜索条件
        dictType: null, // 字典名称
        dictLabel: '', // 字典标签
        status: '' // 字典状态,默认所有
      },
      dialogData: {
        isShow: false, // 默认隐藏
        type: 'add', // 默认新增
        dictType: null, // 字典类型
        dictCode: null // 编辑时，传递的参数
      },
      multipleSelection: []
    }
  },
  watch: {
    // $route.path改变时，mounted()不执行,通过监听$route.path，执行进入页面方法
    '$route.path': 'init'
  },
  mounted() {
    this.init()
  },
  methods: {
    /* 进入页面执行的方法 */
    init() {
      this.dictType = this.$route.query.type
      this.formInline.dictType = this.dictType
      this.searchList()
    },
    /* 获取列表 */
    searchList() {
      this.loading = true
      let obj = Object.assign(
        { type: this.dictType },
        this.searchParams,
        this.formInline
      )
      getDSecondList(
        obj,
        (response) => {
          this.loading = false
          this.tableData = response.rows
          this.total = response.total
        },
        (response) => {
          this.loading = false
          this.$message.warning(response.message)
        }
      )
    },
    /* table选择 */
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    /* 新增、编辑 */
    editPage(type, params = '') {
      this.dialogData.isShow = true
      this.dialogData.type = type
      this.dialogData.dictType = this.dictType
      this.dialogData.dictCode = params
    },
    // 批量删除
    delMul() {
      if (this.multipleSelection.length <= 0) {
        this.$message.warning('请至少选择一条数据！')
        return
      }
      this.$confirm(
        `确认删除选中的这${this.multipleSelection.length}条数据吗？`,
        '删除提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).then(() => {
        let ids = []
        this.multipleSelection.forEach((item) => {
          ids.push(item.dictCode)
        })
        let obj = {
          dictCodes: ids.join(',')
        }
        multipleDelSecond(
          this.dictType,
          obj,
          (response) => {
            this.searchList()
          },
          (response) => {
            this.$message.warning(response.message)
          }
        )
      })
    },
    // 删除单个
    delSingle(id) {
      this.$confirm('确认删除吗？', '删除提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        singleDelSecond(
          this.dictType,
          id,
          (response) => {
            this.searchList()
          },
          (response) => {
            this.$message.warning(response.message)
          }
        )
      })
    },
    // 导出
    exportRoles() {
      this.$confirm('确定导出所有类型吗？', '系统提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let url = exportSecondUrl(this.dictType)
        let params = { ...this.formInline }
        delete params.createTime
        this.downFile('get', url, params, '字典数据')
      })
    },
    /* 换页 */
    changePage(page) {
      this.searchParams.pageNum = page
      this.searchList()
    },
    /* 新增编辑后，刷新列表 */
    refresh() {
      this.toSearch()
    },
    /* 搜索 */
    toSearch() {
      this.dictType = this.formInline.dictType
      this.searchParams.pageNum = 1
      this.searchList()
    }
  }
}
</script>

<style lang="less">
// #secondList {
// }
</style>
